import React, { useRef, useEffect } from 'react';
import { useIntl } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-table';
import { Button, Space } from 'antd';
import style from './index.less';

const ApplicationResultQuery: React.FC = (props) => {
  const intl = useIntl(); // 国际化
  const t = (id: any) => intl.formatMessage({ id }); // 写成传参方式
  const actionRef = useRef();

  const columns = [
    {
      title: () => <>{t('form.ApplicationNo')}</>,
      // title: '申请编号',
      dataIndex: 'applytitle',
    },

    {
      title: () => <>{t('form.ApplicationTime')}</>,
      // title: '申请时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },

    {
      // title: '子商户号',
      title: () => <>{t('form.SubmerchantNo')}</>,
      dataIndex: 'shanghao',
      hideInTable: true,
    },

    {
      title: () => <>{t('form.producttype')}</>,
      disable: true,
      // title: '产品类型',
      dataIndex: 'type',
      valueType: 'select',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.TransactionType')}</>,
      disable: true,
      // title: '交易类型',
      valueType: 'select',
      dataIndex: 'jiaoyileixing',
      hideInTable: true,
    },
    {
      title: () => <>{t('form.Ouraccount')}</>,
      disable: true,
      // title: '本方账户',
      dataIndex: 'benfnag',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.Oppositeaccount')}</>,
      disable: true,
      // title: '对方账户',
      dataIndex: 'duifang',
      hideInSearch: true,
    },
    {
      title: () => <>{t('form.Salesamount')}</>,
      disable: true,
      // title: '卖出金额',
      dataIndex: 'maichu',
      hideInSearch: true,
    },
    {
      disable: true,
      title: () => <>{t('form.Purchaseamount')}</>,
      // title: '买入金额',
      dataIndex: 'mairu',
      hideInSearch: true,
    },
    {
      disable: true,
      // title: '卖出币种',
      title: () => <>{t('form.Sellingcurrency')}</>,
      dataIndex: 'Sellingcurrency',
      valueType: 'select',
      hideInTable: true,
      valueEnum: {
        all: { text: '超长'.repeat(50) },
        open: {
          text: '未解决',
          status: 'Error',
        },
        closed: {
          text: '已解决',
          status: 'Success',
          disabled: true,
        },
        processing: {
          text: '解决中',
          status: 'Processing',
        },
      },
    },
    {
      // title: '买入币种',
      title: () => <>{t('form.Buycurrency')}</>,
      hideInTable: true,
      dataIndex: 'Buycurrency',
      valueType: 'select',
      valueEnum: {
        open: '未解决',
        close: '解决',
        lal: '拖延',
      },
    },
    {
      title: () => <>{t('form.State')}</>,
      disable: true,
      // title: '状态',
      dataIndex: 'state',
      valueType: 'select',
    },
    {
      title: () => <>{t('form.Option')}</>,
      // title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <a key="editable"> {t('form.Close')}</a>,
      ],
    },
  ];

  return (
    <div className={style.ApplicationResultBoss}>
      <ProTable
        style={{ height: '100%' }}
        columns={columns}
        actionRef={actionRef}
        cardBordered
        request={async (params = {}, sort, filter) => {
          console.log('params', params, 'sort', sort, 'filter', filter);
          const data = [
            {
              id: 1,
              shanghao: '11',
              applytitle: '1212121',
            },
            {
              id: 2,
              shanghao: '22',
              maichu: '121312',
            },
            {
              id: 3,
              shanghao: '22',
              maichu: '速度输出',
            },
            {
              id: 4,
              shanghao: '22',
              maichu: '暗杀就此结束进程',
            },
          ];

          return {
            data: data,
          };
        }}
        form={{ labelWrap: true }}
        search={{
          labelWidth: 90,
          // span: 12,
          //   optionRender: ({ searchText, resetText }, { form }, dom) => [
          //     <Button
          //       key="searchText"
          //       type="primary"
          //       onClick={() => {
          //         form?.submit();
          //       }}
          //     >
          //       {/* {t('buttons.query')} */}
          //       提交
          //     </Button>,
          //     <Button
          //       key="resetText"
          //       onClick={() => {
          //         form?.resetFields();
          //       }}
          //     >
          //       {/* {t('buttons.Reset')} */}
          //       重置
          //     </Button>,
          //   ],
          //   collapseRender: (collapsed, showCollapseButton) => {
          //     return collapsed ? (
          //       <Button
          //         type="link"
          //         key="resetText"
          //         onClick={() => {
          //           console.log(
          //             'collapsed, showCollapseButton',
          //             collapsed,
          //             showCollapseButton,
          //           );
          //           setShowFlag(collapsed);
          //         }}
          //       >
          //         展开
          //         {/* {t('buttons.Open')} */}
          //       </Button>
          //     ) : (
          //       <Button
          //         type="link"
          //         key="resetText"
          //         onClick={() => {
          //           console.log(
          //             'collapsed, showCollapseButton',
          //             collapsed,
          //             showCollapseButton,
          //           );
          //           setShowFlag(collapsed);
          //         }}
          //       >
          //         关闭
          //         {/* {t('buttons.Close')} */}
          //       </Button>
          //     );
          //   },
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary">
            {/* 导出 */}
            {t('buttons.Export')}
          </Button>,
        ]}
      />
    </div>
  );
};

export default ApplicationResultQuery;
